<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title>nodom-example submodule</title>
	</head>

	<body>
        <h1>子模块1-子模块不以slot方式出现</h1>
        <div></div>
    </body>
	<script type='module'>
		import{Nodom,Module} from '/dist/nodom.esm.js'

        class M1 extends Module{
            modules=[M3]
            template(props){
                this.model.text = props.text;
                return `
                    <div>
                        <h3>这是模块1</h3>
                        <p>status is : {{pp.status}}</p>
                    </div>
                `
            }

            onBeforeFirstRender(){
                console.log('m1');
                this.watch(this.model.pp,'status',(m,k,ov,nv)=>{
                    console.log('m1',m,k,ov,nv);
                })
            }
        }

        class M2 extends Module{
            //对M1进行声明
            modules=[M1];

            template(props){
                this.model.text = props.m2text;
                return `
                    <div style='background-color:red'>
                        <button e-click='changeStatus'>change status</button>
                        <p>我是模块2，模块1是我的子模块</p>
                        <p>status is:{{info.status}}</p>
                    </div>
                `
            }
            
            data(){
                return {
                    m1text:'传递给m1的数据',
                    show:false
                }
            }
            onBeforeFirstRender(){
                /*this.watch('text',(m,p,v1,v2)=>{
                    this.model.m1text = '修改后的m1数据';
                    this.model.show = !this.model.show;
                    console.log(this.model.show);
                });*/
                this.watch(this.model.info,'status',(m,k,ov,nv)=>{
                    console.log('m2',ov,nv)
                })
            }

            changeStatus(){
                this.model.info.status = 1;
            }
        }

        class M3 extends Module{
            template(){
                return `<h3>这是module3</div>`
            }
        }

        /**
		 * 模块定义
		 */
		class MMain extends Module{
            modules=[M1,M2];
			/**
			 * 模版函数
			 */
			template(){
                //if(this.model.type === 0){
                    return `
                        <div>
                            <p>我是模块main，模块2是我的子模块</p>
                            <button e-click='changeText'>修改text</button>
                            <m1 $pp={{info.xx.yy}}/>
                            <m2 $info={{info.xx.yy}}/>
                        </div>
				    `
                //}
                /*return `
                        <div>
                            <p>我是模块main，模块2是我的子模块</p>
                            <button e-click='changeText'>修改text</button>
                            <button e-click='unmountM1'>卸载M1</button>
                            <button e-click='changeTemp'>更换template</button>
                            <m2 m2text={{m2text}} m1text={{m1text}}/>
                            <p>hello 换了一堆</p>
                        </div>
                `*/
			}

			/**
			 * 数据函数
			 */
			data(){
				return{
                    info:{
                        xx:
                            {yy:{status:0}
                        }
                    }
				}
			}	

            onBeforeFirstRender(){
                this.watch((model,key,ov,nv)=>{
                    console.log('main',model,key,ov,nv)
                })
            }

			changeTemp(){
                this.model.type = 1-this.model.type;
                console.log(this.model.type)
            }



            
       	}
    	Nodom.app(MMain,'div');
	</script>
</html>
